<template>
    <el-sub-menu v-if="hasChildren" :index="itemConfig.path">
        <template #title>
            <el-icon>
                <Folder />
            </el-icon>
            <span>{{ itemConfig.meta.title }}</span>
        </template>
        <SubMenu v-for="item in itemConfig.children" :key="item.path" :itemConfig="item"></SubMenu>
    </el-sub-menu>
    <el-menu-item v-else :index="itemConfig.path" @click="handleClick(itemConfig)">
        <el-icon>
            <Document />
        </el-icon>
        <template #title>
            <span>{{ itemConfig.meta.title }}</span>
        </template>
    </el-menu-item>
</template>

<script setup>
import { ElMenuItem, ElSubMenu, ElIcon } from 'element-plus';
import { Folder, Document } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { useStore } from '@/store';
import { useRoute } from 'vue-router';

const store = useStore()
const route = useRoute()
const props = defineProps({
    itemConfig: {
        type: Object,
        default: () => ({})
    }
})
const hasChildren = computed(() => {
    return props.itemConfig.children && props.itemConfig.children.length
})
const handleClick = (val) => {
    let obj = {
        title: val.meta.title,
        path: val.path
    }
    store.setActiveMenu(obj)
}
const init = () => {
    if (props.itemConfig.path === route.path) handleClick(props.itemConfig)
}
init()
</script>

<style lang="scss" scoped></style>